<template>
	<view class="categoryContainer">
		<!-- 搜索框-->
		<search @click.native="toIndexSearch"/>
		<!-- 内容区域 -->
		<view class="contentContainer">
			<!-- 左边内容 -->
			<view class="leftContaniner">
				<scroll-view scroll-y="true" class="leftScroll">
					<view class="scrollItem" :class="{active:categoryId===item.category_id}" v-for="(item,index) in categorys" :key="item.category_id" @click="categoryId=item.category_id">{{item.name}}</view>
				</scroll-view>
			</view>
			<!-- 右边内容 -->
			<view class="rightContanier">
				<scroll-view scroll-y="true" class="rightScroll">
					<view class="contentList">
						<view class="contenItem" v-for="(item,index) in childrenList" :key="index" @click="toDetail(item.category_id)">
							<image :src="item.image.external_url" ></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import Search from '../../components/search/index.vue'
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				categorys:[] ,//分类信息
				categoryId:''
			}
		},
		components:{
			Search
		},
		mounted() {
			//调用接口
			this.getCategorys()
		},
		methods: {
			async getCategorys(){
				const result = await request('/category/list')
				if(result.status===200){
					this.categorys = result.data.list
					this.categoryId = this.categorys[0].category_id
				}
			},
			//跳转到商品列表
			toDetail(id){
				wx.navigateTo({
					url:'/pages/goodsList/goodsList?categoryId='+id
				})
			},
			
			// 跳到搜索商品
			toIndexSearch(){
				wx.navigateTo({
					url:'../indexSearch/indexSearch'
				})
			}
		},
		computed:{
			categoryObj(){
				return this.categorys.find(item => item.category_id === this.categoryId)
			},
			childrenList(){
				return this.categoryObj && this.categoryObj.children
			}
		}
	}
</script>

<style lang="stylus">
.categoryContainer
	margin-top 10upx
	height 100%
	.contentContainer
		height 100%
		display flex
		box-sizing border-box
		.leftContaniner
			width 20%
			height 100%
			background-color #F1F1F1
			padding 20upx 10upx
			.leftScroll
				height calc(100vh - 80upx)
				.scrollItem
					margin 50upx 20upx
					font-size 26upx
					&.active
						color red
		.rightContanier
			width 80%
			.rightScroll
				height calc(100vh - 80upx)
				.contentList
					display flex
					flex-wrap wrap
					.contenItem
						width 33.33%
						display flex
						flex-direction column
						align-items center
						margin-top 30upx
					image
						width 150upx
						height 150upx
					text
						font-size 26upx
</style>
